// common
.ep1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* flex */
.flex {
	display: flex;
}
.flex-a {
	flex: 1;
	overflow: hidden;
}
.flex-b {
	display: flex;
	justify-content: space-between;
}
.flex-ac {
	display: flex;
	align-items: center;
}
.flex-cb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-cc {
	display: flex;
	align-items: center;
	justify-content: center;
}
// foot
.null {
	width: 750rpx;
	height: 160rpx;
}
.null2 {
	width: 750rpx;
	height: 140rpx;
}
.foot {
	width: 750rpx;
	height: 198rpx;
	position: fixed;
	bottom: 0;

	.bgfoot-img {
		width: 750rpx;
		height: 198rpx;
	}

	.foot-box {
		width: 650rpx;
		height: 94rpx;
		position: absolute;
		top: 60rpx;
		left: 50rpx;
		display: flex;
		justify-content: space-between;

		.alone {
			width: 100rpx;
			height: 100rpx;
			margin-top: -20rpx;
		}

		.box-detail {
			width: 90rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			view {
				font-size: 22rpx;
				color: rgba(40, 40, 40, 0.6);
				line-height: 36rpx;
				margin-top: 10rpx;
				width: 100%;
				text-align: center;
			}

			.choice-color {
				color: #1c274c !important;
			}
		}
	}
}
// foot-end
.parking-place {
	height: 100%;
	display: flex;
	flex-direction: column;
	.park-top {
		position: sticky;
		top: 0;
		z-index: 21;
		&.box-shadow {
			background: #fff;
			box-shadow: 0px 0px 20rpx 0px #a7bcc366;
		}
		.back {
			margin-right: 15rpx;
		}
		.search {
			width: 480rpx;
			height: 64rpx;
			background: #f5f6f7;
			border-radius: 50rpx;
		}
		.tabs {
			padding-bottom: 8rpx;
			margin-top: 28rpx;
			.li {
				color: rgba(#1c274c99, 0.6);
				position: relative;
				padding-bottom: 15rpx;
				&::after {
					content: '';
					width: 0;
					height: 6rpx;
					border-radius: 3rpx;
					background: linear-gradient(98.86deg, #00bbff 0%, #5ada7a 100%);
					position: absolute;
					left: 50%;
					bottom: 0;
					transition: width ease 0.3s;
					transform: translateX(-50%);
				}
				&.active {
					font-weight: bold;
					color: #1c274c;
					&::after {
						width: 40rpx;
					}
				}
			}
		}
	}
	.scroll-Y {
		height: 100%;
		justify-content: space-between;
	}
	.park-cont {
		flex: 1;
		overflow: hidden;
		.tabcont {
			width: 100%;
			height: 100%;
		}
		.laybox {
			width: 100%;
			padding: 20rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			background: #f4faf7;
			border-radius: 36rpx 36rpx 0 0;
			.lay-tit {
				height: 60rpx;
				margin-bottom: 10rpx;
				font-size: 24rpx;
				color: #1c274c99;
				.jt {
					margin-left: 10rpx;
				}
				&.lay-tit2 {
					height: 35rpx;
					align-items: flex-start;
					.bar {
						width: 90rpx;
						height: 6rpx;
						margin-top: 5rpx;
						opacity: 0.2;
						border-radius: 5rpx;
						background: rgba(#1c274c99, 0.6);
					}
				}
			}
			.list {
				.li {
					margin-bottom: 20rpx;
					.item {
						font-size: 24rpx;
						background: #fff;
						border-radius: 20rpx;
						padding: 20rpx;
						box-sizing: border-box;
						position: relative;
						.near {
							position: absolute;
							right: 0;
							padding: 3rpx 15rpx;
							top: 0;
							border-radius: 0 20rpx 0 20rpx;
							background: rgba(#24a7ce1a, 0.1);
							color: #24a7ce;
							font-size: 24rpx;
						}
						.row1 {
							font-size: 32rpx;
							color: #1c274c;
							font-weight: bold;
						}
						.row2 {
							margin: 20rpx 0 30rpx;
							.left {
								flex: 1;
								overflow: hidden;
								font-size: 24rpx;
								.dd {
									margin-bottom: 10rpx;
									.icon {
										width: 32rpx;
										flex-shrink: 0;
										margin-right: 10rpx;
										display: flex;
										align-items: center;
										image {
											width: 32rpx;
											height: 32rpx;
										}
									}
									.txt1 {
										color: rgba(#1c274c99, 0.6);
										text {
											margin: 0 10rpx;
										}
									}

									.tag {
										border-radius: 4rpx;
										padding: 0 10rpx;
										box-sizing: border-box;
										margin-right: 10rpx;
										display: flex;
										align-items: center;
										justify-content: center;
										image {
											width: 24rpx;
											height: 24rpx;
											margin-right: 6rpx;
										}
										&.tag1 {
											background: rgba(#5ada7a, 0.1);
											border: 2rpx solid #5ada7a;
											color: #5ada7a;
										}
										&.tag2 {
											background: rgba(#ff2c41, 0.1);
											border: 2rpx solid #ff2c41;
											color: #ff2c41;
										}
									}
									&:last-child {
										margin-bottom: 0;
									}
								}
							}
							.right {
								width: 80rpx;
								flex-shrink: 0;
								text-align: center;
								margin-left: 20rpx;
								.go {
									margin-top: -15rpx;
									image {
										width: 64rpx;
										height: 64rpx;
									}
								}
								.km {
									font-size: 24rpx;
									color: rgba(#1c274c99, 0.6);
								}
							}
						}
						.row3 {
							.zt {
								font-size: 32rpx;
								font-weight: bold;
							}
							.s1 {
								color: #5ada7a;
							}
							.s2 {
								color: #ff8100;
							}
							.s3 {
								color: #ff2c41;
							}
							.per {
								margin: 0 20rpx;
								align-items: flex-end;
								.txt1 {
									font-size: 32rpx;
									font-weight: bold;
								}
								.txt2 {
									color: rgba(#1c274c99, 0.6);
									margin: 0 0 4rpx 10rpx;
								}
							}
							.step {
								flex: 1;
								overflow: hidden;
								height: 12rpx;
								border-radius: 6rpx;
								background: #f5f6f7;
								.jd {
									height: 12rpx;
									border-radius: 6rpx;
									&.s1 {
										background: #5ada7a;
									}
									&.s2 {
										background: #ff8100;
									}
									&.s3 {
										background: #ff2c41;
									}
								}
							}
						}
					}
				}
			}
		}
		.laybox2 {
			padding-bottom: 0;
		}
	}
}
// park-detail
.parking-detail {
	.park-top {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: url('https://test2.h5.org.cn/zw/zxt/wx1/bg_top1.png') no-repeat top center;
		background-size: 100% 100%;
		z-index: 1;
	}
	.park-cont {
		.laybox {
			bottom: 0;
		}
		.lay-cont {
			.row4 {
				padding: 10rpx;
				position: relative;
				height: 126rpx;
				margin: 30rpx 0;
				border-radius: 8rpx;
				background: linear-gradient(90deg, #f4faf7 0%, rgba(244, 250, 247, 0) 100%);

				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 126rpx;
				}
				.txt {
					.col1 {
						width: 32rpx;
						flex-shrink: 0;
						margin-top: 8rpx;
						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
					.col2 {
						margin: 0 20rpx 0 10rpx;
						font-size: 24rpx;
						color: #1c274c;
						line-height: 1.5;
					}
					.col3 {
						width: 80rpx;
						flex-shrink: 0;
						margin-top: 20rpx;
						text-align: center;
						margin-left: 20rpx;
						.go {
							margin-top: -15rpx;
							image {
								width: 64rpx;
								height: 64rpx;
							}
						}
						.km {
							font-size: 24rpx;
							color: rgba(#1c274c99, 0.6);
						}
					}
				}
			}
			.row5 {
				image {
					height: 360rpx;
					width: 100%;
					border-radius: 8rpx;
				}
			}

			//收费标准
			.li2 {
				.item-tit {
					font-size: 32rpx;
					font-weight: bold;
					color: #1c274c;
					margin-bottom: 26rpx;
					image {
						width: 32rpx;
						height: 32rpx;
						flex-shrink: 0;

						margin-right: 15rpx;
					}
				}
				.item-cont {
					font-size: 28rpx;
					line-height: 48rpx;
				}
			}
		}
	}
}
.park-bot {
	background: #fff;
	box-shadow: 0 10rpx 30rpx 0 rgba(0, 0, 0, 0.1);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 22;
	padding-bottom: constant(safe-area-inset-bottom) !important;
	padding-bottom: env(safe-area-inset-bottom) !important;
	.group {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		&::after {
			display: none;
		}
	}
	.fl {
		button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image {
				width: 36rpx;
				height: 36rpx;
			}
			.txt {
				font-size: 20rpx;
				color: rgba(#1c274c99, 0.6);
			}
		}
	}
	.fr {
		button {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			padding: 0 60rpx;
			margin-left: 20rpx;
			box-sizing: border-box;
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
			&.btn1 {
				background: rgba(36, 167, 206, 0.1);
				color: #24a7ce;
			}
			&.btn2 {
				background: linear-gradient(99deg, #0bf 0%, #5ada7a 100%);
				color: #fff;
			}
		}
	}
}
